<template>
  <div class="me-friend-body" v-title data-title="我的好友">
    <el-container class="me-friend-container">
      <el-main>
        <el-tabs v-model="activeName">
          <el-tab-pane label="我的好友" name="myFriend">
            <div v-if="friendList.length > 0">
              <ul class="me-friend-items">
                <li v-for="item in friendList" :key="item.friendUserId" class="me-friend-item">
                  <div class="me-friend-content">
                    <span class="me-friend-info">{{item.friendUserName}}</span>
                    <div v-if="item.meIsAdmin > 0">
                      <el-button class="e-friend-meta" style="margin-right: -240px"  type="text"
                           @click="setAdmin(item.friendUserId, item.friendIsAdmin)">
                        {{item.friendIsAdmin === 1 ? '取消管理员' : '设为管理员'}}
                      </el-button>
                    </div>

                    <el-button class="e-friend-meta" type="text" @click="relieveFriend(item.friendUserId)">删除</el-button>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 好友申请模块 -->
            <div v-else>暂无数据</div>
          </el-tab-pane>
          <el-tab-pane label="好友申请" name="friendApply">
            <div v-if="friendApplyList.length > 0">
              <ul class="me-friend-items">
                <li v-for="item in friendApplyList" :key="item.applyUserId" class="me-friend-item">
                  <div class="me-friend-content">
                    <span class="me-friend-info">{{item.createTime}}<span style="color: #969696;margin-left: 5px;">{{item.applyUserName}}</span>申请添加你为好友</span>
                    <el-button class="e-friend-meta" type="text" @click="agreeFriendApply(item.id)">同意</el-button>
                  </div>
                </li>
              </ul>
            </div>
            <div v-else>暂无数据</div>
          </el-tab-pane>
          <!-- 搜索好友模块的实现 -->
          <el-tab-pane label="添加好友" name="addFriend">
            <div>
              <el-input placeholder="请输入搜索账号" v-model="queryParam">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
              </el-input>
              <div class="me-search" v-if="searchFriend">
                <div class="me-friend-content">
                  <span class="me-friend-info">{{searchFriend.friendUserName}}</span>
                  <el-button class="e-friend-meta" type="text" @click="apply(searchFriend.friendUserId)">申请添加好友</el-button>
                </div>
              </div>
              <div class="me-search" v-else>暂无数据</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {listFriend, listFriendApply, relieve, agree, search, apply, setAsAdmin} from '@/api/friend'
export default {
    name: "BlogFriend",
    components: {

    },
    data() {
      return {
        friendList: [],
        friendApplyList:[],
        activeName: 'myFriend',
        queryParam:'',
        searchFriend:undefined,
      }
    },
    created() {
      this.getFriends()
      this.getFriendApplys()
    },
    methods: {
      //好友列表的加载
      getFriends() {
        let that = this
        let params = {page:1, pageSize:200}
        listFriend(params).then(res => {
          that.friendList = res.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '好友列表加载失败', showClose: true})
          }
        })
      },
      //好友请求
      getFriendApplys() {
        let that = this
        let params = {page:1, pageSize:200}
        listFriendApply(params).then(res => {
          that.friendApplyList = res.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '好友申请列表加载失败', showClose: true})
          }
        })
      },
      //好友删除
      relieveFriend(friendUserId) {
        let that = this
        let params = {"friendUserId":friendUserId}
        relieve(params).then(res => {
          that.$message({message: '删除好友成功', type: 'success', showClose: true})
          that.$router.go(0)
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '刪除好友失败', showClose: true})
          }
        })
      },
      //接受好友申请
      agreeFriendApply(id) {
        let that = this
        let params = {"applyId":id}
        agree(params).then(res => {
          that.$message({message: '同意好友申请成功', type: 'success', showClose: true})
          that.$router.go(0)
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '同意好友申请失败', showClose: true})
          }
        })
      },
      //给予管理员权限
      setAdmin(userId, admin) {
        let that = this
        let isAdmin = admin === 1 ? 0 : 1;
        let params = {"userId":userId, "admin":isAdmin}
        setAsAdmin(params).then(res => {
          that.$message({message: '管理员设置成功', type: 'success', showClose: true})
          that.$router.go(0)
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '管理员设置失败', showClose: true})
          }
        })
      },
      //搜索好友
      search(){
        let params = {"account":this.queryParam}
        let loading = this.$loading({
          lock: true,
          text: '搜索中...'
        })
        let that = this
        search(params).then(res => {
          loading.close();
          if(res.data != null) {
            that.searchFriend = res.data
          }
        }).catch(error => {
          loading.close();
          if (error !== 'error') {
            that.$message({type: 'error', message: '搜索好友失败', showClose: true})
          }
        })
      },
      //好友申请进程
      apply(friendUserId){
        let params = {"friendUserId":friendUserId}
        let loading = this.$loading({
          lock: true,
          text: '申请添加好友中...'
        })
        let that = this
        apply(params).then(res => {
          loading.close();
          console.log(res)
        }).catch(error => {
          loading.close();
          if (error !== 'error') {
            that.$message({type: 'error', message: '申请添加好友失败', showClose: true})
          }
        })
      }
    }
  }
</script>

<style>
  .me-friend-body {
    margin: 60px auto 140px;
  }

  .me-friend-container {
    width: 800px;
  }

  .me-friend-items {
    padding-top: 10px;
  }

  .me-friend-item {
    width: 45%;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 25px;
    border-bottom:1px solid #000000;
  }

  .me-friend-content {
    display: flex;
    justify-content:space-between;
    width: 100%;
    transition: border-color .3s;
  }

  .me-friend-info{
    display: flex;
    align-items:center;
    cursor: pointer;
  }

  .me-friend-meta {
    font-size: 12px;
    color: #969696;
  }

  .me-friend-admin {
    font-size: 12px;
    margin-right: 30px;
    color: #969696;
  }

  .me-search {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 25px;
    border-bottom:1px solid #000000;
  }
</style>
